<template>
    <div id="date-picker-con">
        <div class="date">
            日期
        </div>
        <el-date-picker
            v-model="defaultTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
            @change="dateChange"
        >
        </el-date-picker>
    </div>
</template>

<script>
    import { currentMonthMixins } from 'assets/js/currentMonthMixins';
    export default {
        mixins: [
            currentMonthMixins
        ],
        data () {
            return {
                dateModel: [],
                defaultTime: []
            };
        },
        created () {
            // 默认选择日期为当前月的起始日期
            this.defaultTime = [this.getCurrentMonthFirst(), this.getCurrentMonthLast()];
            this.dateChange();
        },
        methods: {
            /**
             * 日期更改事件
             */
            dateChange () {
                this.$parent.dateChange(this.defaultTime);
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#date-picker-con {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 60px;
    border: 1px dashed #ccc;
    padding: 0 20px;
    .date {
        margin-right: 20px;
        font-size: @font-size-medium;
        color: @color-text-g;
    }
}
/deep/.el-date-editor--daterange.el-input__inner {
    width: 490px;
}
</style>
